<template>
  <div class="activity-app">
    <div
      v-for="(item, index) in data[prop]"
      :key="index"
      style="margin-bottom: 10px;"
    >
      <el-row>
        <el-col :span="22">
          <label class="el-form-item__label">
            App{{ index + 1 }}
          </label>
          <SelectApplication
            ref="selectAppRef"
            :value="item.packageId"
            :data="item"
            album-prop="appName"
            prop="packageId"
            class="activity-app-item"
          />
        </el-col>
        <el-col :span="2">
          <el-button v-if="index > 0" type="danger" icon="el-icon-delete" circle style="margin-left: 10px;" @click.prevent="removeItem(index)" />
        </el-col>
      </el-row>
    </div>
    <el-button size="small" class="mt10" type="primary" icon="el-icon-circle-plus-outline" plain @click="addItem">新增</el-button>
  </div>
</template>

<script>
import SelectApplication from '@/pages/operation/album/components/SelectApplication.vue'
import { defalutPositionItem } from '../config'

export default {
  name: 'AcitivityApp',
  components: {
    SelectApplication
  },
  props: {
    prop: {
      type: String,
      default: ''
    },
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  mounted() {
    console.log(this.prop, this.data, 'AcitivityApp')
  },
  methods: {
    addItem() {
      this.data[this.prop].push({ ...defalutPositionItem })
    },
    removeItem(index) {
      this.data[this.prop].splice(index, 1)
    },
    submit() {
      const selectAppRefs = this.$refs.selectAppRef || []
      selectAppRefs.forEach(item => {
        item.submit()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// .activity-app {
//   display: flex;
//   &-item {
//     margin-bottom: 20px;
//   }
// }
</style>
